﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AutoComplete 编辑器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script> 
    
    
          
</head>
<body>
    <h1>AutoComplete 编辑器</h1>      

    <input type="button" value="save" onclick="saveRow()"/>
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;"  allowResize="true"
    url="../data/AjaxService.jsp?method=SearchEmployees"  idField="id"
    oncellcommitedit="onCellCommitEdit"
    allowCellEdit="true" allowCellSelect="true"
>
    <div property="columns">
        <div type="indexcolumn"></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号            
        </div>                
          
        <div field="country" displayField="countryName" width="200" allowSort="true">国家       
            <div property="editor" class="mini-autocomplete" textField="text" valueField="id" 
                url="../data/AjaxService.jsp?method=FilterCountrys2">     
                <div property="columns">
                    <div header="ID" field="id" width="30"></div>
                    <div header="国家" field="text"></div>
                </div>
            </div>
        </div>
        <div field="countryCode" width="100" allowSort="true">国家Code           
        </div>
    </div>
</div>    
    
    <script type="text/javascript">
        mini.parse();
        
        var grid = mini.get("datagrid1");
        grid.load();

        ///////////////////////////////       
        function saveRow() {
            var rows = grid.getChanges();
            var json = mini.encode(rows);
            alert(json);

        }

        function onCellCommitEdit(e) {
            if (e.field == "country") {

                var item = e.editor.findItems(e.value)[0];                
                if (item) {                
                    grid.updateRow(e.record, { countryCode: item.id });
                }
            }
        }

    </script>

    <div class="description">
        <h3>Description</h3>
        
    </div>
</body>
</html>